.FrontTAPDetails {
	width: 100%;
	height: 80vh;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: center;

	.ant-result {
		.ant-result-title {
			color: white;
		}
	}

	.Box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& > div {
			width: 100%;
			overflow: hidden;

			&:first-child {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 16px;

				& > div {
					font-size: 14px;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #ffffff;
					padding: 8px 16px;
					cursor: pointer;
					transition: all 0.35s;
					background: transparent;
					border-radius: 8px;
					overflow: hidden;

					&:hover,
					&.active {
						color: #b2fbfd;
						background: linear-gradient(
							rgba(255, 255, 255, 0),
							rgba(255, 255, 255, 0.35)
						);
					}
				}
			}

			&:last-child {
				flex: 1;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;

				& > div {
					height: 100%;

					&:first-child {
						flex: 1;
						margin-right: 16px;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						overflow: hidden;

						& > div {
							width: 100%;

							&:first-child {
								flex: 1;
								overflow-y: scroll;
								padding-bottom: 1px;
								margin-bottom: 16px;

								&::-webkit-scrollbar {
									display: none;
								}
							}

							&:last-child {
								background: rgba(0, 0, 0, 0.35);
								width: 100%;
								height: 300px;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}

					&:last-child {
						flex: 2;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						& > div {
							flex: 1;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;

							& > div:first-child {
								width: 100%;
								margin: 16px 0;
							}

							& > div:last-child {
								width: 100%;
								flex: 1;
							}
						}
					}
				}
			}
		}
	}
}

.CommandTrajectory {
	width: 100%;
	height: 80vh;
	overflow: hidden;
	position: relative;
	z-index: 1;

	& > .Label {
		position: absolute;
		right: 16px;
		top: 16px;
		z-index: 2;
		background: rgba(247, 247, 247, 0.5);
		backdrop-filter: blur(10px);
		padding: 16px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;

		& > div:first-child {
			margin-right: 8px;
			font-size: 16px;
			font-family: ShuHeiTi;
			font-weight: bold;
			color: #333333;
		}
	}

	& > .TrajectoryMap {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
}

.BeamSliceDetail {
	padding: 40px;
	height: 60vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	& > div:first-child {
		width: 100%;
		height: 104px;
		display: flex;
		align-items: center;
		justify-content: center;

		& > div {
			flex: 1;
			margin: 24px;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22px;
			font-family: PingFang SC;
			font-weight: 600;
			color: white;
			border: 1px solid #ffcb4f;
			background: linear-gradient(
				0deg,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0.1) 100%
			);
		}
	}

	& > div:last-child {
		width: 100%;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;

		& > div {
			width: 100%;
			height: 100%;
			padding: 24px;
			overflow: hidden;

			&:first-child {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				& > div {
					width: 100%;

					&:nth-child(2) {
						margin-bottom: 16px;
						height: 120px;
						display: flex;
						align-items: center;
						justify-content: center;

						& > div {
							flex: 1;

							& > div {
								height: 48px;
								margin: 2px;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 18px;
								font-family: PingFang SC;
								font-weight: 400;
								color: #ffffff;

								&:first-child {
									background: rgba(255, 203, 79, 0.4);
								}

								&:last-child {
									background: rgba(71, 141, 255, 0.4);
								}
							}
						}
					}

					&:nth-child(4) {
						flex: 1;

						& > div {
							display: flex;
							align-items: center;
							justify-content: center;
							height: 48px;
							background: rgba(71, 141, 255, 0.4);
							margin-bottom: 2px;
							font-size: 18px;
							font-family: PingFang SC;
							font-weight: 600;
							color: #ffffff;

							& > div:first-child {
								width: 240px;
							}
						}
					}
				}
			}
		}
	}
}

.BeamPedestalDetail {
	padding: 16px;
	height: 60vh;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden;

	& > div:first-child {
		width: 240px;
		height: 100%;
		padding-right: 16px;
		overflow-y: scroll;

		& > div {
			width: 100%;
			font-size: 22px;
			font-family: PingFang SC;
			font-weight: 600;
			color: #ffffff;
			margin: 8px 0;
			cursor: pointer;
			padding: 8px;

			&.active {
				border: 1px solid #ffcb4f;
			}

			& > div {
				width: 100%;
				line-height: 24px;
			}
		}
	}

	& > div:last-child {
		flex: 1;
	}
}

.CameraModal {
	width: 100%;
	height: 70vh;

	.options {
		display: none;
	}
}

.InspectionDetails {
	padding: 16px;

	& > .Top {
		padding-bottom: 16px;

		& > .Content {
			& > .Title {
				border-bottom: 1px solid #e6e6e6;
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 40px;
				padding: 8px;

				& > div:first-child {
					font-size: 24px;
					font-family: ShuHeiTi;
					font-weight: bold;
					color: #ffffff;
				}

				& > div:last-child {
					font-size: 18px;
					font-family: ShuHeiTi;
					font-weight: bold;

					& > span {
						font-size: 24px;
						margin-right: 8px;
					}
				}
			}
		}
	}

	& > .Btm {
		& > .Details {
			margin-bottom: 8px;
			padding: 0 16px;

			& > .Title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 32px;
				padding: 8px 16px;
				transition: all 0.35s;
				background: rgba(1, 195, 175, 0.4);
				cursor: pointer;

				& > div:first-child {
					font-size: 18px;
					font-family: ShuHeiTi;
					font-weight: bold;
					color: #ffffff;
				}

				& > div:last-child {
					font-size: 18px;
					font-family: ShuHeiTi;
					font-weight: bold;
					color: #ffffff;
				}

				&:hover {
					background: rgba(1, 195, 175, 0.9);
				}
			}

			& > .Item {
				overflow: hidden;

				&.Hidden {
					height: 0;
				}
			}
		}
	}

	.List {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;

		& > div {
			width: 50%;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			padding: 8px 16px;

			&:last-child {
				width: 100%;
			}

			& > div:first-child {
				width: 88px;
				font-size: 16px;
				font-family: ShuHeiTi;
				font-weight: bold;
				color: #ffffff;
			}

			& > div:last-child {
				flex: 1;
				font-size: 16px;
				font-family: ShuHeiTi;
				font-weight: bold;
				color: #01c3af;
			}
		}
	}

	.Image {
		margin: 0 16px;
		padding: 8px;
		border: 1px solid #e6e6e6;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;

		& > div {
			width: 50%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			background: transparent;
			transition: all 0.35s;
			cursor: pointer;

			& > span {
				font-size: 40px;
				margin-right: 8px;
			}

			& > div {
				flex: 1;
				font-size: 16px;
				font-family: ShuHeiTi;
				font-weight: bold;
				color: #ffffff;
				overflow: hidden;
			}

			&:hover {
				background: rgba(1, 195, 175, 0.4);
			}
		}
	}
}

.RiskDetailsBox {
	padding: 16px;

	& > .Top {
		margin-bottom: 8px;

		& > .Text {
			margin-bottom: 4px;

			& > div {
				width: 50%;
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
				padding: 8px 16px;

				&:last-child {
					width: 100%;
				}

				& > div:first-child {
					width: 88px;
					font-size: 16px;
					font-family: ShuHeiTi;
					font-weight: bold;
					color: #ffffff;
				}

				& > div:last-child {
					flex: 1;
					font-size: 16px;
					font-family: ShuHeiTi;
					font-weight: bold;
					color: #01c3af;
				}
			}
		}
	}

	.Image {
		margin: 0 16px;
		padding: 8px;
		border: 1px solid #e6e6e6;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-bottom: 4px;

		& > div {
			width: 50%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			background: transparent;
			transition: all 0.35s;
			cursor: pointer;

			& > span {
				font-size: 40px;
				margin-right: 8px;
				color: #b2fbfd;
			}

			& > div {
				flex: 1;
				font-size: 16px;
				font-family: ShuHeiTi;
				font-weight: bold;
				color: #ffffff;
				overflow: hidden;
			}

			&:hover {
				background: rgba(1, 195, 175, 0.4);
			}
		}
	}
}

.SecurityActivityDetailBox {
	padding: 16px;

	.Text {
		margin-bottom: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;

		& > div {
			width: 50%;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			padding: 8px 16px;

			&:last-child {
				width: 100%;
			}

			& > div:first-child {
				width: 88px;
				font-size: 16px;
				font-family: ShuHeiTi;
				font-weight: bold;
				color: #ffffff;
			}

			& > div:last-child {
				flex: 1;
				font-size: 16px;
				font-family: ShuHeiTi;
				font-weight: bold;
				color: #01c3af;
			}
		}
	}

	.Image {
		margin: 0 16px;
		padding: 8px;
		border: 1px solid #e6e6e6;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-bottom: 4px;

		& > div {
			width: 50%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			background: transparent;
			transition: all 0.35s;
			cursor: pointer;

			& > span {
				font-size: 40px;
				margin-right: 8px;
				color: #b2fbfd;
			}

			& > div {
				flex: 1;
				font-size: 16px;
				font-family: ShuHeiTi;
				font-weight: bold;
				color: #ffffff;
				overflow: hidden;
			}

			&:hover {
				background: rgba(1, 195, 175, 0.4);
			}
		}
	}

	.Person {
		margin: 0 16px;
		border: 1px solid #e6e6e6;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-bottom: 4px;

		& > div {
			height: 32px;
			padding: 0 8px;
			margin: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			font-family: ShuHeiTi;
			font-weight: bold;
			color: #ffffff;
			background: rgba(1, 195, 175, 0.4);
			border-radius: 4px;
		}
	}
}

.AiDetailsModal {
	padding: 16px;
	display: flex;
	align-items: flex-start;
	justify-content: center;

	& > img {
		width: 220px;
		height: 480px;
		margin-right: 16px;
	}

	& > div {
		flex: 1;
		background: #033b55;
		padding: 16px;

		& > div:first-child {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			& > div {
				width: 48%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin: 8px;

				& > div:first-child {
					font-size: 16px;
					font-family: MicrosoftYaHei;
					font-weight: bold;
					color: #ffffff;
					width: 100px;
					text-align: right;
					margin-right: 8px;
				}

				& > div:last-child {
					font-size: 14px;
					font-family: MicrosoftYaHei;
					font-weight: bold;
					color: #b1fafd;
					flex: 1;
				}
			}
		}

		& > div:last-child {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			& > div {
				width: 48%;
				background: #001f2f;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				padding: 16px;

				& > div {
					width: 100%;
					font-size: 16px;
					font-family: MicrosoftYaHei;
					font-weight: bold;
					color: #ffffff;
					margin: 8px 0;
				}

				& > img {
					width: 100%;
					aspect-ratio: 4/3;
					display: block;
				}
			}
		}
	}
}

.JTGJThrDataFou {
	height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;

	& > div {
		height: 100%;
	}

	& > .Right {
		flex: 1404;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& > div {
			width: 100%;
		}
	}

	.one {
		padding: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.dataOne {
			width: 100%;

			& > div {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 8px;
				position: relative;
				z-index: 1;

				&::after {
					position: absolute;
					content: "";
					left: 66px;
					right: 0;
					bottom: 10px;
					height: 16px;
					background: linear-gradient(
						90deg,
						rgba(0, 255, 238, 0.2),
						rgba(0, 255, 238, 0)
					);
				}

				& > img {
					width: 60px;
					height: 60px;
					display: block;
					margin-right: 8px;
				}

				& > div:nth-child(2) {
					font-size: 30px;
					font-family: YouSheBiaoTiHei;
					flex: 1;
				}

				& > div:nth-child(3) {
					font-size: 33px;
					font-family: YouSheBiaoTiHei;
					color: #ffffff;
				}
			}
		}
	}

	.two {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8px;

		& > div {
			height: 100%;

			&:nth-child(1) {
				width: 238px;
				margin-right: 8px;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-direction: column;

				& > div {
					width: 100%;
				}

				& > div:first-child {
					position: relative;
					z-index: 1;
					width: 238px;
					height: 200px;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					& > img {
						position: absolute;
						left: 0;
						top: 0;
						width: 238px;
						height: 238px;
						z-index: -1;
						display: block;
					}

					& > div:first-child {
						font-size: 42px;
						font-family: MicrosoftYaHei;
						font-weight: bold;
						color: #ff4f52;
						margin-bottom: 60px;
					}

					& > div:last-child {
						font-size: 14px;
						font-family: MicrosoftYaHei;
						color: #ffffff;
					}
				}

				& > div:last-child {
					position: relative;
					z-index: 2;
					width: 238px;
					flex: 1;
					padding: 0 16px;

					& > div {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						position: relative;
						z-index: 1;

						&::after {
							position: absolute;
							content: "";
							left: 0;
							right: 0;
							bottom: 4px;
							height: 8px;
							background: linear-gradient(
								90deg,
								rgba(0, 255, 238, 0.2),
								rgba(0, 255, 238, 0)
							);
						}

						& > div:first-child {
							font-size: 17px;
							font-family: YouSheBiaoTiHei;
						}

						& > div:last-child {
							font-size: 19px;
							font-family: YouSheBiaoTiHei;
							color: #ffffff;
						}
					}
				}
			}

			&:nth-child(2) {
				flex: 1;
				margin-right: 8px;
			}

			&:nth-child(3) {
				width: 320px;

				& > div:first-child {
					display: flex;
					align-items: center;
					justify-content: space-between;

					& > div:first-child {
						width: 146px;

						& > div {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							position: relative;
							z-index: 1;

							&::after {
								position: absolute;
								content: "";
								left: 0;
								right: 0;
								bottom: 4px;
								height: 8px;
								background: linear-gradient(
									90deg,
									rgba(0, 255, 238, 0.2),
									rgba(0, 255, 238, 0)
								);
							}

							& > div:first-child {
								font-size: 17px;
								font-family: YouSheBiaoTiHei;
							}

							& > div:last-child {
								font-size: 19px;
								font-family: YouSheBiaoTiHei;
								color: #ffffff;
							}
						}
					}
				}

				& > div:last-child {
					width: 100%;

					& > div:first-child {
						margin: 8px 0;
					}

					& > div:last-child {
						& > div {
							display: flex;
							align-items: center;
							justify-content: space-between;
							border-bottom: 1px solid rgba(57, 167, 225, 0.2);
							line-height: 30px;
							font-size: 12px;
							font-family: MicrosoftYaHei;
							color: #ffffff;
						}
					}
				}
			}
		}
	}

	.thr {
		width: 100%;
		height: 100%;
		padding: 16px;
		display: flex;
		align-items: center;
		justify-content: center;

		& > div {
			height: 100%;

			&:first-child {
				width: 480px;
				display: flex;
				align-items: center;
				align-content: center;
				justify-content: center;
				flex-wrap: wrap;
				margin-right: 16px;

				& > div {
					width: 50%;
					height: 120px;
					display: flex;
					align-items: center;
					justify-content: center;

					& > div:first-child {
						width: 80px;
						height: 80px;
						background: rgba(0, 77, 64, 1);
						border: 4px solid #c4ffea;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					& > div:last-child {
						height: 80px;
						width: 160px;
						margin-left: -44px;
						background: linear-gradient(-90deg, rgba(0, 0, 0, 0), #009784);
						background: radial-gradient(
								circle at 0 40px,
								transparent 50px,
								rgba(0, 151, 132, 0.4) 20px
							)
							top left;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						padding-left: 48px;

						& > div:first-child {
							font-size: 28px;
							font-family: MicrosoftYaHei;
							font-weight: bold;
						}

						& > div:last-child {
							font-size: 14px;
							font-family: PingFang SC;
							font-weight: 400;
							color: #ffffff;
						}
					}
				}
			}

			&:last-child {
				flex: 1;
			}
		}
	}
}
